<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link href="resources/css/mui.min.css" rel="stylesheet" />
<link href="resources/css/common1.css" rel="stylesheet" />
<link href="resources/css/swiper.css" rel="stylesheet" />
<script src="resources/js/swiper.js"></script>
<script src="resources/js/jquery-1.10.1.min.js"></script>
<script src="resources/js/mui.min.js"></script>
<script src="resources/js/WebViewJavascriptBridge.js"></script>
<script src="resources/js/common.js"></script>
<title>登陆</title>
<style>
body,html{width: 100%; max-width: 800px; background: #fff; list-style: none; text-decoration: none;}
input:-webkit-autofill {
-webkit-box-shadow:0 0 0px 1000px #EFEFEF inset !important;
}
.fontS12{font-size: 12px;}
.fontS16{font-size: 16px;}
.fontS20{font-size: 20px;}
.marginT10{margin-top: 10px;}
.marginB10{margin-bottom: 10px;}
p {	text-indent: 0px;}
.mui-content{background: #ffffff;}
.mui-bar .mui-pull-left .mui-icon {	padding-right: 5px;	font-size: 28px;}
.mui-bar .mui-btn {font-weight: normal;font-size: 17px;}
.mui-bar .mui-btn-link {top: 1px;}
#header{background-color:#3084df; }
.mui-title{ color: #ffffff;}
#header a{ color: #ffffff;}
.mui-plus header.mui-bar {display: none!important;}
.mui-plus .mui-bar-nav~.mui-content {padding: 0!important;}
.mui-plus .plus{display: inline;}
.plus{	display: none;}
.mui-content{background: #ffffff;padding: 0px;}
	.login{ width: 100%; height: 540px; margin: 0 auto;}
	.loginFrom{ width: 100%; border-radius: 5px; padding: 20px; height: 310px;background-color: #FFFFFF;}
	.loginFrom .login-tit{ height: 30px; margin-bottom: 20px; margin-top: -50px;}
	.login-tit span{ display: inline-block;color:#ffffff; cursor: pointer; width: 48%; height: 30px; line-height: 18px; font-size: 12px; text-align: center;}

	.login-tit .active{ font-size: 16px;} 
	.p_name, .p_password{ width: 100%;  position:relative;height: 40px; background-color: #EFEFEF; cursor: pointer; cursor: pointer;}
	.p_name input, .p_password input{width:200px; color:#333; font-size: 14px; border:0px; background-color: #EFEFEF; display: inline-block;   height: 28px; margin-top: 6px;  padding-left: 35px;}
	.p_name img, .p_password img{ margin: 0px 6px; margin-top: 8px; position: absolute;}
	.p_password .getCode{ width: 100px;  border:0px;   font-size: 13px;color: #ff4208; height: 38px;text-align: center; top: 0px; display: inline-block; background-color:#efefef; position: absolute; right: 0px;}
	.loginBtn{width: 100%; height: 35px; background: -webkit-linear-gradient(left, #3357fb , #3084df); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #3357fb , #3084df); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #3357fb , #3084df); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #3357fb , #3084df); /* 标准的语法（必须放在最后） */
     cursor: pointer; color: #FFFFFF; border: 0px;}
	.p_forgetPass { width: 100%; text-align: right; font-size: 14px; color: #cfcfcf;}
	.p_forgetPass a{font-size: 14px;color: #777777;}
	.toreg{ width: 100%; text-align: center;font-size: 14px; color: #777777;}
	.toreg a{ color: #ff4208; font-size: 14px;}
	.loginFrom p{margin-bottom:15px;}
	.p_forgetPass span{display:line-block; float:left;}
	.clearFixed	{height:50px;}
	.loginTitBox{ width: 100%; padding-top: 40px; height: 180px; background: #4591e2; color: #ffffff;}
	.loginTitBox a{color: #ffffff; position: absolute; left: 10px; top:10px;}
	.titImg{ margin: 0 auto; display: block; width:70px;}
	
	.otherLogin{width: 90%;margin-left: 5%; text-align: center;}
	.otherLogin span{display: inline-block;}
	.borderTop{height: 5px; width:33%; border-top: 1px solid #ccc;}
	.otherLoginTit{height: 30px; color:#ccc; width:30%; text-align:center; line-height: 30px;}
	.otherLogin img{ width: 40px;    margin-top: 5px;}
</style>
</head>
<body>
	<div class="login">
		<div class="loginTitBox">
			<!-- <a href="javascript:history.back(-1)"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<a id="toBack1"  href="javascript:;" onclick="closePage();"  class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorf"></a>
			<img class="titImg" src="resources/images/userTitImg.png">
		</div>
		<div class="loginFrom"  id="loginSms" loginType="2">
			<p class="login-tit"><span class="active loginSms" >短信验证登录</span> <span class="loginPassword">密码登录</span> </p>
			<p class="p_name"><img src="resources/images/iphoneimg.png"><input type="number" name="" id="username1" value="" placeholder="请输入手机号" /></p>
			<p class="p_password"><img src="resources/images/messgimg.png"><input  type="text"  id="password1"  placeholder="请输入验证码"/>  <button  id="btn" class="getCode" type="button">获取验证码</button></p>
			<p class="p_forgetPass"><span class="colorRed text-left msgAlert"></span><a href="#">&nbsp;&nbsp;</a></p>
			<p><button class="loginBtn" id="btnSubmit1">登录</button></p>
			<p class="toreg">没有账号 ? <a href="register.html" id="toRegisterBtn">立即注册</a></p>
		</div>
		<div class="loginFrom" id="loginPassword" loginType="2" style="display: none;">
			<p class="login-tit"><span class="loginSms" >短信验证登录</span><span class="active loginPassword">密码登录</span></p>
			<p class="p_name"><img src="resources/images/userimg.png"><input type="number" name="username" id="username" value="" placeholder="请输入账号" /></p>
			<p class="p_password"><img src="resources/images/passimg.png"><input type="password" name="password" id="password" value=""  placeholder="请输入密码"/></p>
			<p class="p_forgetPass"><span class="colorRed passwordAlert"></span><a href="javascript:;" id="btnForgetPass">忘记密码?</a></p>
			<p><button class="loginBtn" id="btnSubmit">登录</button></p>
			<p class="toreg">没有账号 ? <a href="register.html">立即注册</a></p>
		</div>
		
		
		<!--<div class="otherLogin">
			<span class="borderTop"></span>
			<span class="otherLoginTit">其他方式登录</span>
			<span class="borderTop"></span>
			<img src="resources/images/webWechat.png">
		</div> -->
	</div>
</body>
</html>
<script>
var loginType = '2';
$(".loginFrom p input").focus(function(){
	$(this).parent().addClass("focus").siblings().removeClass("focus");
})
$("#loginPassword .loginSms").click(function(){
	loginType = '2';
	$("#loginPassword").hide();
	$("#loginSms").show()
})
$("#loginSms .loginPassword").click(function(){
	loginType = '1';
	$("#loginSms").hide()
	$("#loginPassword").show();
})

$('#btnForgetPass').click(function(){
	$("#loginPassword").hide();
	$("#loginSms").show()
});
//验证码获取接口： sendVerifyCode?mobile=15800000001
$('.getCode').click(function(){
	$(".prompt").hide();
	var mobile = $('#username1').val();
	if(mobile=='') {
		$('#username1').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".msgAlert").text("请输入手机号码").show ().delay (1000).fadeOut (); */
		mui.toast('请输入手机号码');
		return;
	}
	if(!/^1[0-9]{10}$/.test(mobile)) {
		$('#username1').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".msgAlert").text("手机号码格式不正确").show ().delay (1000).fadeOut (); */
		mui.toast('手机号码格式不正确');
		return;
	}
	var header={
	     	app_version:'1.1.1',
	     	app_model:'ios',
	     	token:'066995456465562'
	}
	 
 	var body= "";
 	var model ="";
 	var jdata="";	
	body={
		mobile: mobile
    }
    model={
    	body:body,
    	header:header,
    }
    jdata=JSON.stringify(model);
	 $.ajax({
		url: 'appUser/sendMsg',
		type: 'post',
		data: {
			data: jdata
		},
		success: function() {
			invokeSettime("#btn");
		},
		error: function(data){
			commonHandleAjaxError(data);
		}
	})
});

//短信
$('#btnSubmit1').click(function(){
	var username = $('#username1').val();
	var password = $('#password').val();
	var dynaCode = $('#password1').val();
	if(username=='') {
		$('#username1').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".msgAlert").text("请输入手机号码！").show ().delay (1000).fadeOut (); */
		mui.toast('请输入手机号码');
		return;
	}
	if(!/^1[0-9]{10}$/.test(username)) {
		$('#username1').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".msgAlert").text("手机号码格式不正确！").show ().delay (1000).fadeOut (); */
		mui.toast('手机号码格式不正确');
		return;
	}
	if(dynaCode=='') {
		$('#password1').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".msgAlert").text("请输入验证码！").show ().delay (1000).fadeOut (); */
		mui.toast('请输入验证码！');
		return;
	}
	doLogin(username, null, dynaCode,2);
});	
	//密码
$('#btnSubmit').click(function(){
	var username = $('#username').val();
	var password = $('#password').val();
	var dynaCode = $('#password1').val();
	if(username=='') {
		$('#username').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".passwordAlert").text("请输入手机号码！").show ().delay (1000).fadeOut (); */
		mui.toast('请输入手机号！');
		return;
	}
	if(!/^1[0-9]{10}$/.test(username)) {
		$('#username').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".passwordAlert").text("手机号码格式不正确！").show ().delay (1000).fadeOut (); */
		mui.toast('手机号码格式不正确！');
		return;
	}
	if(password=='') {
		$('#password').parent().addClass("focus").siblings().removeClass("focus");
		/* $(".passwordAlert").text("请输入密码！").show ().delay (1000).fadeOut (); */
		mui.toast('请输入密码！');
		return;
	}
	doLogin(username, password, null,1);
});
var header={
     	app_version:'1.1.1',
     	app_model:'ios',
     	token:'066995456465562'
     }
 
	

function doLogin(username, password, dynaCode,type){
	var body= "";
	var model ="";
	var jdata="";	
body={
	'mobile': username,
	'code':dynaCode,
	'pwd': password,
	'type':type
}
model={
	body:body,
	header:header,
}
jdata=JSON.stringify(model);
	$.ajax({
		url: 'appUser/login',
		type: 'get',
		data:{
			'data':jdata
		},
		success: function(data) {
			var json=JSON.parse(data);
			var uid= json.data;
			if(json.msg=="请求成功"){
				mui.toast("登录成功");
				/* setTimeout(function(){
					location.href="index.html"
				}, 2000); */
				//调用common.js method
				closePage();
				var storage = window.localStorage; 
				storage["uid"] = json.data.uid;
				storage["token"] = json.data.token;
			}else{
				mui.toast(json.msg);
			}
			
		},
		error: function(data){
			var d = JSON.parse(data.responseText);
			mui.toast(d.msg);
		}
	});
}
	
function invokeSettime(obj){
    var countdown=60;
    settime(obj);
    function settime(obj) {
        if (countdown == 0) {
            $(obj).attr("disabled",false);
            $(obj).text("获取验证码");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled",true);
            $(obj).text(countdown + "s");
            countdown--;
        }
        setTimeout(function() {
            settime(obj) }
        ,1000);
    }
}
</script>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="resources/js/wxshare.js"></script>-->